<form [formGroup]="formGroup">
  <div class="row g-1">
    <div class="col-12">
      <label class="form-label" for="deviceAddress">Device Name</label>
      <input type="text" class="form-control" id="deviceName" formControlName="name" autocomplete="off" required>
      @let nameErrors = formGroup.controls.name.errors;
      @if (nameErrors) {
        @if (nameErrors['nameExists']) {
          <div class="invalid-feedback">
            Device with this name already exists
          </div>
        }
      }
    </div>
    <div class="col-12 col-md-4">
      <label class="form-label" for="sshUsername">Username</label>
      <input type="text" class="form-control" id="sshUsername" formControlName="sshUsername"
             autocomplete="off" placeholder="username">
    </div>
    <div class="col-12 col-md-8">
      <label class="form-label" for="deviceAddress">Address</label>
      <div class="input-group address-input">
        <input type="text" class="form-control flex-fill" id="deviceAddress" formControlName="address"
               autocomplete="off" placeholder="address">
        <span class="input-group-text">:</span>
        <input type="number" class="form-control port" id="devicePort" formControlName="port" step="1" min="0"
               max="65535" maxlength="5" autocomplete="off" placeholder="port">
      </div>
    </div>
    <div class="col-12 col-md-4">
      <label class="form-label" for="authMethod">Authentication</label>
      <select class="form-select" id="authMethod" [formControl]="formGroup.controls.sshAuth.controls.type" required>
        <option value="localKey">Private Key</option>
        <option value="password">Password</option>
        <option value="appKey">App Key</option>
        <option value="devKey" [hidden]="hideDevModeAuth" [disabled]="hideDevModeAuth">Dev Mode</option>
      </select>
    </div>
    <div class="col-12 col-md-8">
      <label class="form-label d-none d-md-block invisible">Authentication Info</label>
      <div class="input-group auth-input" [formGroup]="formGroup.controls.sshAuth">
        @let authType = formGroup.controls.sshAuth.controls.type.getRawValue();
        @if (authType) {
          <input type="text" class="form-control" id="authValue" formControlName="value" [appSshAuthValue]="authType"
                 autocomplete="off">
          @if (authType === 'localKey') {
            <button type="button" class="btn btn-outline-secondary" (click)="chooseSshPrivKey()"
                    aria-label="Choose private key">
              Choose...
            </button>
          }
          <button type="button" class="btn btn-outline-secondary" (click)="authInfoHelp()"
                  aria-label="About authentication info">
            <i class="bi bi-question-circle-fill"></i>
          </button>
        }
      </div>

      @let sshAuthErrors = formGroup.controls.sshAuth.errors;
      @if (sshAuthErrors) {
        <div class="invalid-feedback">
          @if (sshAuthErrors['UnsupportedKey']) {
            Unsupported private key.
          } @else if (sshAuthErrors['IO']) {
            Can't find private key
          } @else if (sshAuthErrors['PassphraseRequired']) {
            This private key requires passphrase
          } @else if (sshAuthErrors['BadPassphrase']) {
            Wrong passphrase
          } @else if (sshAuthErrors['PassphraseRequired']) {
            Please input passphrase
          }
        </div>
      }
    </div>
    @if (formGroup.controls.sshAuth.controls.type.getRawValue() === 'appKey') {
      @let appPubKey = appSshPubKey$ | async;
      <div class="col-12 input-group mt-1">
        <input type="text" class="form-control" [value]="appPubKey" readonly>
        <button type="button" class="btn btn-outline-secondary" (click)="appPubKey && copyText(appPubKey)">
          <i class="bi bi-copy"></i>
        </button>
      </div>
    }
    <div class="col-md-12">
      <label class="form-label" for="deviceDescription">Description</label>
      <textarea class="form-control" id="deviceDescription" formControlName="description" maxlength="100"
                placeholder="Optional description for the device">
        </textarea>
    </div>
  </div>
</form>
